<template >
  <div class="quan">
    <div class="lun">
      <el-carousel height="250px" class="tu">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="xiang">
        <div>
            <div class="op" style="color:red">￥200</div>
            <div class="op"><b>秭归伦晚脐橙5kg装</b> </div>
            <div class="op"><small>单果200g起 新老包装随机发货 新鲜水果 水果礼盒</small> </div>
        </div>
        <div class="jian">
            <div>
                <div>冷藏</div>
                <div>存储条件</div>
            </div>
            <div>
                <div>冷藏</div>
                <div>存储条件</div>
            </div>
            <div>
                <div>冷藏</div>
                <div>存储条件</div>
            </div>
            <div>
                <div>冷藏</div>
                <div>存储条件</div>
            </div>
        </div>
    </div>
    <div class="hui">
            <div class="song">
                <div class="text"><small> 配送</small></div>
                <div class="text"><small>立即下单，预计 今日11:00-12:00送达</small> </div>
            </div>
            <div class="you">
                <div class="text"><small>优惠</small></div>
                <div class="text" >
                    <div class="juan">
                        <div class="tet1">领卷</div>
                        <div class="tet2">满99减20</div>
                        <div class="tet3">满299减120</div>
                    </div>
                    <div class="juan2">
                        <div class="tet1">
                            多买优惠
                        </div>
                        <div>
                            <small>满两件,总价打9.8折</small> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lu">
            <div class="ping">
                <div>评论</div>
                <div><small> 好评率99.8%</small></div>
            </div>
            <div class="iop">
                <div>
                    <img src="../../public/image/53436f8f1f04085e413f7f956c4be90.jpg" alt="" width="50px" height="50px" class="tou">
                </div>
                <div>
                    <div>
                        莫***
                    </div>
                    <div>
                        <el-rate v-model="value1"></el-rate>
                    </div>
                    <div>
                        是饿了么小哥送来的，一开始我还以为点的外卖，东西很好！送货很快
                    </div>
                    <div>
                        
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: "XiangView",
  data() {
    return {};
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {},

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped >
.quan{
    background-color: rgb(231, 231, 231);
}
.lun {
    width: 90%;
    margin: 0 auth;
    margin-left: 5%;
}
.tu{
    width: 100%;
    margin:  0 auth;
    background-color: white;
}
.xiang{
    background-color: white;
    width: 90%;
    margin: 0 auto;
}
.op{
    margin-bottom: 10px;
    margin-left: 10px;
}
.jian{
    display: flex;
    border-top: 1px solid rgb(230, 229, 229);
    justify-content: space-between;
    padding: 10px;
    font-size: 10px;
    margin-bottom: 10px;
    /* border: 1px solid; */
}
.hui{
    margin-top: 10px;
    /* border: 1px solid; */
    width: 90%;
    margin: 0 auto;
    background-color: white;
    margin-bottom: 10px;
}
.song{
    display: flex;
    border-bottom: 1px solid rgb(230, 229, 229);

}
.you{
    display: flex;
}
.juan{
    display: flex;
    margin-bottom: 10px;
    /* border-top: 1px solid rgb(230, 229, 229); */

}
.juan2{
    display: flex;
}
.text{
    margin: 10px;
}
.tet1{
    margin-right: 20px;
    background-color: rgb(252, 199, 214);
    color: rgb(254, 87, 87);
    border-radius: 5px;
    padding: 2px;
    font-size: 5px;
}
.tet2{
    margin-right: 20px;
    border: 1px solid  rgb(254, 87, 87);
    font-size: 5px;
    padding: 4px;
    color: rgb(254, 87, 87);
}
.tet3{
    margin-right: 20px;
    border: 1px solid  rgb(254, 87, 87);
    font-size: 5px;
    padding: 4px;
    color: rgb(254, 87, 87);
}
.lu{
    background-color: white;
    /* margin-top: 50px; */
    width: 90%;
    margin: 0 auto;
}
.ping{
    display: flex;
    justify-content: space-between;
}
.iop{
    display: flex;
}
.tou{
    border-radius: 50px ;
}
</style>
